<!--
 * @Author: panda
 * @Date: 2022-05-18 10:09
 * @Description: 上传文章页面
-->
<template>
  <el-form style="margin: 20px" :model="params" label-width="120px">
    <el-form-item label="标题: ">
      <el-input v-model="params.title" />
    </el-form-item>
    <el-form-item label="分类: ">
      <el-select v-model="params.categoryId" placeholder="请选择文章分类">
        <el-option :label="c.categoryName" :value="c.id" v-for="c in categories" :key="c.id" />
      </el-select>
    </el-form-item>
    <el-form-item label="封面: ">
      <UploadImage @file-url="getFileUrl" :cover-url="params.thumbnail" />
    </el-form-item>
    <el-form-item label="类型: ">
      <el-radio-group v-model="params.copyright">
        <el-radio label="原创" />
        <el-radio label="转载" />
      </el-radio-group>
    </el-form-item>
    <el-form-item label="正文: ">
      <MarkDown
        v-model:value="params.content"
        @change="handleChange"
        ref="markDownRef"
        placeholder="这是占位文本"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">发布
      </el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts">
import {defineComponent, onMounted, reactive, toRefs} from 'vue'
import {MarkDown} from '@/components/markdown'
import {articleApi} from "@/api/article";
import UploadImage from "@/components/upload/UploadImage.vue";
import {ElNotification} from "element-plus/es";
import {Categories} from '@/api/model/category';
import {categoryAPI} from "@/api/category";
import {useRoute} from "vue-router";
import {router} from "@/router";
import {useUserStore} from "@/store/modules/user";

export default defineComponent({
  name: 'PostArticle',
  components: {MarkDown, UploadImage},

  setup() {
    const route = useRoute()

    //上传文章参数，标题，摘要，内容，分类名，首图，是否原创
    const params = reactive({
      title: '',
      summary: '',
      content: '',
      categoryId: '',
      thumbnail: '',
      copyright: ''
    })
    // 分类
    const category = reactive(new Categories())
    const userStore = useUserStore()

    // Markdown是否有输入
    function handleChange(v: string) {
      params.content = v
    }


    // 提交文章
    const onSubmit = () => {
      if (route.params.id) {
        articleApi.modifyArticle({
          id: route.params.id as unknown as number, title: params.title,
          summary: params.summary,
          content: params.content,
          categoryId: params.categoryId,
          thumbnail: params.thumbnail,
          copyright: params.copyright,
        }).then(
          res => {
            console.log(params)
            const {code, msg} = res.data
            if (code !== 400) {
              ElNotification({
                title: '成功信息',
                message: msg,
                type: 'success',
              })
              router.push("/user/" + userStore.getUserInfo.id)

            } else {
              ElNotification({
                title: '错误信息',
                message: 'code：' + code + '，' + 'msg：' + msg,
                type: 'error',
              })
            }
          }
        )
      } else {
        articleApi.postArticle({
          title: params.title,
          summary: params.summary,
          content: params.content,
          categoryId: params.categoryId,
          thumbnail: params.thumbnail,
          copyright: params.copyright,
        }).then(res => {
          const {code, msg} = res.data
          if (code !== 400) {
            ElNotification({
              title: '成功信息',
              message: msg,
              type: 'success',
            })
            router.push("/user/" + userStore.getUserInfo.id)
          } else {
            ElNotification({
              title: '错误信息',
              message: 'code：' + code + '，' + 'msg：' + msg,
              type: 'error',
            })
          }
        }).catch(
          err => {
            console.log(err);
          }
        )
      }
    }

    // 获取上传图片组件emit的图片url
    const getFileUrl = (val: string) => {
      params.thumbnail = val
    }

    onMounted(() => {
      if (route.params.id) {
        articleApi.getArticleDetail({id: route.params.id as unknown as number}).then(
          res => {
            const {data} = res.data
            params.title = data.title
            params.summary = data.summary,
              params.content = data.content,
              params.categoryId = data.categoryId,
              params.thumbnail = data.thumbnail,
              params.copyright = data.copyright
          }
        ).catch()
      }
      // 请求分类
      categoryAPI.getCategories({}).then(
        res => {
          const {data} = res.data
          category.categories = data
        }
      ).catch()
    })

    return {
      getFileUrl,
      params,
      onSubmit,
      handleChange,
      ...toRefs(category)
    }
  }

})
</script>

<style scoped>

</style>
